/*
 * @FilePath: \flutter_ducafecat_news_getx\lib\pages\main\widgets\recommendmusic.dart
 * @Date: 2022-07-14 14:26:02
 * @LastEditTime: 2022-07-15 17:24:20
 * @Description: 推荐歌单
 */

import 'package:flutter/material.dart';
import 'package:flutter_ducafecat_news_getx/common/entities/card.dart';
import 'package:flutter_ducafecat_news_getx/common/utils/iconfont.dart';
import 'package:flutter_ducafecat_news_getx/common/values/colors.dart';
import 'package:flutter_ducafecat_news_getx/common/widgets/components.dart';

import 'package:flutter_ducafecat_news_getx/pages/main/index.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
import 'package:get/get.dart';

///后部分平滑。定义本地json[]数据,后期网络获取。
const recommed = [
  {
    "bg": "assets/images/feature-1.png",
    "lt": false,
    "rt": "122.2亿",
    "lbo": null,
    "lbt": null,
    "bottom": "一听就想单曲循环的粤语歌曲"
  },
  {
    "bg": "assets/images/feature-2.png",
    "lt": true,
    "rt": "192万",
    "lbo": null,
    "lbt": null,
    "bottom": "美到窒息的小提琴曲，每一首都不会错过"
  },
  {
    "bg": "assets/images/feature-3.png",
    "lt": false,
    "rt": "371万",
    "lbo": null,
    "lbt": null,
    "bottom": "华语今典 | 怀旧音乐时光机"
  },
  {
    "bg": "assets/images/eg_1.jpg",
    "lt": false,
    "rt": "79万",
    "lbo": null,
    "lbt": null,
    "bottom": "网易云音乐10万+评论合集"
  },
  {
    "bg": "assets/images/eg_2.png",
    "lt": false,
    "rt": "51万",
    "lbo": null,
    "lbt": null,
    "bottom": "今天从灰色轨迹听起|私人雷达"
  },
  {
    "bg": "assets/images/eg_3.png",
    "lt": false,
    "rt": "3556万",
    "lbo": null,
    "lbt": null,
    "bottom": "阿尔法脑波音乐[激发右脑潜能]"
  }
];
//通过json为实体类
final cardList =
    recommed.map<CardMusic>((item) => CardMusic.fromJson(item)).toList();
//后部分平滑移动
final List<Widget> cards = cardList
    .map((card) => musicCardMy(
        bg: card.bg,
        lt: card.lt,
        rt: card.rt,
        lbo: card.lbo,
        lbt: card.lbt,
        bottom: card.bottom))
    .toList();

///前部分滚动 定义本地json[]数据,后期网络获取。
const swiper = [
  {"bg": "assets/images/eg_4.png", "bottom": "今天从灰色轨迹听起|私人雷达"},
  {"bg": "assets/images/eg_5.png", "bottom": "一个让你元气满满每一天的歌单(o^^o)"},
  {"bg": "assets/images/eg_6.png", "bottom": "今天从《canzonipreferite》听起|私人雷达"}
];
//通过json为实体类
final swiperList =
    swiper.map<CardSwiper>((e) => CardSwiper.fromJson(e)).toList();
//上部滚动图
final List<Widget> imageSlidersMy =
    swiperList.map((e) => swiperCard(image: e.bg)).toList();
//下部滚动文字
final List<Widget> textSliders =
    swiperList.map((e) => swiperText(text: e.bottom)).toList();
//组合两个滚动为一个,每个高度都必须写。
Widget fro = Container(
  margin: EdgeInsets.symmetric(horizontal: 5.w),
  height: 140.h,
  width: 100.h,
  child: Column(
    children: [
      SizedBox(
        height: 5.h,
      ),
      SizedBox(
          height: 100.h,
          child: Swiper(
            itemBuilder: (context, index) => imageSlidersMy[index],
            itemCount: imageSlidersMy.length,
            autoplay: true,
            scrollDirection: Axis.vertical,
          )),
      SizedBox(
          height: 33.h,
          child: Swiper(
            autoplay: true,
            itemBuilder: (context, index) => textSliders[index],
            itemCount: textSliders.length,
            scrollDirection: Axis.vertical,
          )),
    ],
  ),
);

class MusicRcommend extends GetView<MainController> {
  MusicRcommend();

  ///该卡片已抽离，作为基本组件
  // Widget cardy = Container(
  //   margin: EdgeInsets.symmetric(horizontal: 5.w),
  //   height: 165.h,
  //   child: Column(
  //     children: [
  //       //上部卡片
  //       Container(
  //         height: 105.h,
  //         width: 100.h,
  //         child: Stack(
  //           alignment: Alignment.topCenter,
  //           children: [
  //             Container(
  //               height: 100.h,
  //               width: 90.h,
  //               decoration: BoxDecoration(
  //                 borderRadius: BorderRadius.all(Radius.circular(10.h)),
  //                 color: Colors.grey[300],
  //               ),
  //             ),
  //             Positioned(
  //               bottom: 0,
  //               child: Stack(
  //                 children: [
  //                   Container(
  //                     height: 100.h,
  //                     width: 100.h,
  //                     decoration: BoxDecoration(
  //                       borderRadius: BorderRadius.all(Radius.circular(10.h)),
  //                       color: Colors.amber[200],
  //                       image: DecorationImage(
  //                         image: AssetImage('assets/images/eg_1.jpg'),
  //                         fit: BoxFit.cover,
  //                       ),
  //                     ),
  //                   ),
  //                   //左上小图标
  //                   Positioned(
  //                     child: Container(
  //                       alignment: Alignment.center,
  //                       height: 14.h,
  //                       width: 14.h,
  //                       decoration: BoxDecoration(
  //                           borderRadius:
  //                               BorderRadius.all(Radius.circular(7.h)),
  //                           color: Colors.transparent.withOpacity(0.5)),
  //                       child: Icon(
  //                         Iconfont.changpian,
  //                         color: AppColors.drawer,
  //                         size: 14.sp,
  //                       ),
  //                     ),
  //                     top: 5.h,
  //                     left: 5.h,
  //                   ),
  //                   //右上小图标加文字说明
  //                   Positioned(
  //                     child: Container(
  //                       alignment: Alignment.center,
  //                       padding: EdgeInsets.symmetric(
  //                           horizontal: 2.w, vertical: 1.h),
  //                       height: 14.h,
  //                       decoration: BoxDecoration(
  //                           borderRadius:
  //                               BorderRadius.all(Radius.circular(10.h)),
  //                           color: Colors.transparent.withOpacity(0.5)),
  //                       child: Row(
  //                         crossAxisAlignment: CrossAxisAlignment.center,
  //                         children: [
  //                           Icon(
  //                             Icons.arrow_right,
  //                             color: AppColors.drawer,
  //                             size: 16.sp,
  //                           ),
  //                           Text(
  //                             '119.7亿',
  //                             style: TextStyle(
  //                                 fontSize: 8.sp, color: AppColors.drawer),
  //                           )
  //                         ],
  //                       ),
  //                     ),
  //                     top: 5.h,
  //                     right: 5.h,
  //                   ),
  //                   //左下文本
  //                   Positioned(
  //                       bottom: 5.h,
  //                       left: 5.h,
  //                       child: Column(
  //                         children: [
  //                           Text(
  //                             "时光",
  //                             style: TextStyle(
  //                               color: AppColors.primaryElementText,
  //                               fontWeight: FontWeight.bold,
  //                             ),
  //                           ),
  //                           Text(
  //                             "雷达",
  //                             style: TextStyle(
  //                               color: AppColors.primaryElementText,
  //                               fontWeight: FontWeight.bold,
  //                             ),
  //                           ),
  //                         ],
  //                       ))
  //                 ],
  //               ),
  //             )
  //           ],
  //         ),
  //       )
  //       //下部文字
  //       ,
  //       Container(
  //         height: 33.h,
  //         width: 100.w,
  //         child: Text(
  //           "一个让你元气满满每一个的歌单啦啦啦啦飞机凯撒浪费",
  //           overflow: TextOverflow.ellipsis,
  //           maxLines: 2,
  //           style: TextStyle(fontSize: 11.sp),
  //         ),
  //       )
  //     ],
  //   ),
  // );

  Widget t = SingleChildScrollView(
    padding: EdgeInsets.symmetric(horizontal: 7.w),
    reverse: true,
    scrollDirection: Axis.horizontal,
    child: Row(
      children: [
        // cardMy,
      ],
    ),
  );

  @override
  Widget build(BuildContext context) {
    // zuihou.addAll(cards);
    List<Widget> recom = [fro];
    recom.addAll(cards);
    return Container(
      height: 200.h,
      child: Column(
        children: [
          Container(
            margin: EdgeInsets.all(10.w),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  '推荐歌单',
                  style:
                      TextStyle(fontSize: 18.sp, fontWeight: FontWeight.bold),
                ),
                Container(
                  height: 25.h,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(15.w)),
                    border: Border.all(
                        width: 0.5, color: Colors.transparent.withOpacity(0.3)),
                  ),
                  child: TextButton(
                    style: ButtonStyle(
                      visualDensity: VisualDensity.compact,
                      foregroundColor: MaterialStateProperty.all(Colors.black),
                    ),
                    onPressed: () {},
                    child: Row(
                      children: [
                        Text('更多'),
                        Icon(
                          Icons.arrow_forward_ios_outlined,
                          size: 12.sp,
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
          SizedBox(
            height: 140.h,
            width: 375.w,
            child: ListView(
              padding: EdgeInsets.symmetric(horizontal: 10.w),
              // reverse: true,
              scrollDirection: Axis.horizontal,
              children: recom,
            ),
          )
        ],
      ),
    );
  }
}
